<template>
	<view :class="{'drawer':true,'in':isShow}" @tap.stop="switchDrawer">
		<view :class="{'con':true, 'up':isShow}">
			<view class="close" @tap.stop="switchDrawer">x</view>
			<view class="list-con">
				<view class="list" v-for="item in resumes" :key="item.cid" @tap.stop="tapItem(item.cid)">
					{{item.job_name}}
				</view>
			</view>
		</view>
		<view :class="{'mask':true,'show':isShow}"></view>
	</view>
</template>

<script setup>
	import {
		onShow,
		onHide
	} from '@dcloudio/uni-app'
	import {
		ref,
		defineExpose,
		defineProps
	} from 'vue'
	const props = defineProps({
		resumes: Array
	})
	const emits = defineEmits(['sendResume'])
	let isShow = ref(false)
	const switchDrawer = () => {
		isShow.value = !isShow.value
	}
	const tapItem = (cid) => {
		emits('sendResume', cid)
	}
	//需将该方法暴露给父组件
	defineExpose({
		switchDrawer
	})
</script>

<style scoped>
	.drawer {
		position: fixed;
		top: 0;
		left: -10000px;
		z-index: 100000;
		width: 100%;
		height: 100%;
	}

	.con {
		width: 100%;
		height: 180px;
		background: white;
		position: absolute;
		z-index: 1000002;
		bottom: -200px;
		transition: bottom 0.8s;
	}

	.close {
		position: absolute;
		right: 10px;
		z-index: 1000003;
		top: 5px;
		font-size: 18px;
	}

	.mask {
		position: absolute;
		z-index: 1000001;
		width: 100%;
		height: 100%;
		background: #000;
		opacity: 0;
		transition: opacity 1s;
	}

	.up {
		bottom: 0px;
	}

	.show {
		opacity: 0.5;
	}

	.in {
		left: 0px;
	}

	.list-con {
		margin: 15px;
	}

	.list {
		height: 36px;
		border-bottom: 1px dashed #d7d7d7;
		color: #3d3d3d;
		box-sizing: border-box;
		display: flex;
		padding: 15px;
		align-items: center;
	}
</style>